<template>

	<view class="pagePadding" >

		<view class="flex-between">
			<view class="v-title flex-align-center">
				<text></text>
				<view>短视频配置</view>
			</view>
			<!-- <view class="flex">
				<uni-icons color="#3E9BFE" type="plusempty" size="24"></uni-icons>
				<text style="color: #3E9BFE;">添加配置</text>
			</view> -->

		</view>
		<view class="configurationList flex-wrap-justifyBetween">
			<view class="container flex-between" v-for="(item,i) in optionsList" :key="i">
				<image class="icon" :src="item.imageUrl" mode=""></image>
				<view style="height: 162rpx;" class="flex-column-around">
					<view class="flex-between font-size_32rpx font-weight_bold" style="width: 224rpx;">
						<view class="font-overflow2">
							{{item.applyName}}
						</view>

					</view>
					<view class="flex-between" style="width: 224rpx;">
						<view class="flex" @click="modifyFn(item,1,1,i+1)">
							<uni-icons color="#666666" type="compose" size="24"></uni-icons>
							<view class="" style="font-size: 32rpx;">
								修改
							</view>
						</view>
						<view class="">
							<switch color="#007aff" :style="{marginRight:i >= 2 ? '-24rpx' : '-10rpx'}"
								style="transform:scale(0.6);" :checked="item.status==1?true:false"
								@change="e=>switch1Change(e,item)" />
						</view>
						<!-- <view class="flex ">
							<uni-icons color="#666666" type="trash" size="24"></uni-icons>
							删除
						</view> -->
					</view>
				</view>

			</view>


		</view>


		<view class="flex-between">
			<view class="v-title flex-align-center">
				<text></text>
				<view>关注账号</view>
			</view>
			<!-- <view class="flex">
				<uni-icons color="#3E9BFE" type="plusempty" size="24"></uni-icons>
				<text style="color: #3E9BFE;">添加配置</text>
			</view> -->

		</view>
		<view class="configurationList flex-wrap-justifyBetween">
			<view class="container flex-between" v-for="(item,i) in optionsList1" :key="i">
				<image class="icon" :src="item.imageUrl" mode=""></image>
				<view style="height: 162rpx;" class="flex-column-around">
					<view class="flex-between font-size_32rpx font-weight_bold" style="width: 224rpx;">
						<view class="font-overflow2">
							{{item.applyName}}
						</view>
						<!-- <view class="">
							<switch color="#007aff" :style="{marginRight:i >= 2 ? '-24rpx' : '-10rpx'}"
								style="transform:scale(0.6);" :checked="item.status==1?true:false"
								@change="e=>switch1Change(e,item)" />
						</view> -->
					</view>
					<view class="flex-between" style="width: 224rpx;">
						<view class="flex-between" @click="modifyFn(item,0,2,i+1)">
							<uni-icons color="#666666" type="compose" size="24"></uni-icons>
							<view class="" style="font-size: 32rpx;">
								修改
							</view>
						</view>
						<view class="">
							<switch color="#007aff" :style="{marginRight:i >= 2 ? '-24rpx' : '-10rpx'}"
								style="transform:scale(0.6);" :checked="item.status==1?true:false"
								@change="e=>switch1Change(e,item)" />
						</view>
						<!-- <view class="flex ">
							<uni-icons color="#666666" type="trash" size="24"></uni-icons>
							删除
						</view> -->
					</view>
				</view>
			</view>
		</view>

		<view class="flex-between">
			<view class="v-title flex-align-center">
				<text></text>
				<view>点评种草</view>
			</view>
			<!-- <view class="flex">
				<uni-icons color="#3E9BFE" type="plusempty" size="24"></uni-icons>
				<text style="color: #3E9BFE;">添加配置</text>
			</view> -->

		</view>
		<view class="configurationList flex-wrap-justifyBetween">
			<view class="container flex-between" v-for="(item,i) in optionsList2" :key="i">
				<image class="icon" :src="item.imageUrl" mode=""></image>
				<view style="height: 162rpx;" class="flex-column-around">
					<view class="flex-between font-size_32rpx font-weight_bold" style="width: 224rpx;">
						<view class="font-overflow2">
							{{item.applyName}}
						</view>

					</view>
					<view class="flex-between" style="width: 224rpx;">
						<view class="flex" @click="modifyFn(item,0,3,i+1)">
							<uni-icons color="#666666" type="compose" size="24"></uni-icons>
							<view class="" style="font-size: 32rpx;">
								修改
							</view>
						</view>
						<view class="">
							<switch color="#007aff" :style="{marginRight:i >= 2 ? '-24rpx' : '-10rpx'}"
								style="transform:scale(0.6);" :checked="item.status==1?true:false"
								@change="e=>switch1Change(e,item)" />
						</view>
						<!-- <view class="flex ">
							<uni-icons color="#666666" type="trash" size="24"></uni-icons>
							删除
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="flex-between">
			<view class="v-title flex-align-center">
				<text></text>
				<view>更多推荐</view>
			</view>
			<view class="flex" @click="addFn()">
				<uni-icons color="#3E9BFE" type="plusempty" size="24"></uni-icons>
				<text style="color: #3E9BFE;">添加配置</text>
			</view>

		</view>
		<view class="configurationList flex-wrap-justifyBetween">
			<view class="container flex-between" v-for="(item,i) in optionsList3" :key="i">
				<image class="icon" :src="item.imageUrl" mode=""></image>
				<view style="height: 162rpx;" class="flex-column-around">
					<view class="flex-between font-size_32rpx font-weight_bold" style="width: 224rpx;">
						<view class="font-overflow2">
							{{item.applyName}}
						</view>
						<view class="">
							<switch color="#007aff" :style="{marginRight:item.name == '转发朋友圈' ? '-24rpx' : '-10rpx'}"
								style="transform:scale(0.6);" :checked="item.status==1?true:false"
								@change="e=>switch1Change(e,item)" />
						</view>
					</view>
					<view class="flex-between" style="width: 224rpx;">
						<view class="flex" @click="modifyFn(item,0,4,i+1)">
							<uni-icons color="#666666" type="compose" size="24"></uni-icons>
							修改
						</view>
						<view class="flex " @click="deleteFn(item)">
							<uni-icons color="#666666" type="trash" size="24"></uni-icons>
							删除
						</view>
					</view>
				</view>
			</view>
		</view>

		<uv-tabbar :value="value" @change="changeTabbar">
				<uv-tabbar-item text="首页">
				
				
					<template v-slot:active-icon>
						<image class="icon" :src="none1"></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="icon" :src="none1"></image>
					</template>
				</uv-tabbar-item>
				
				<uv-tabbar-item text="记录">
				
					<template v-slot:active-icon>
						<image class="icon" :src="sel2 "></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="icon" :src="none2"></image>
					</template>
				</uv-tabbar-item>
				<uv-tabbar-item text="配置">
					<template v-slot:active-icon>
						<image class="icon" :src=" sel3 "></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="icon" :src="none3"></image>
					</template>
				</uv-tabbar-item>
				<uv-tabbar-item text="文案">
				
					<template v-slot:active-icon>
						<image class="icon" :src="sel4 "></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="icon" :src="none4"></image>
					</template>
				</uv-tabbar-item>
				
			</uv-tabbar>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				none1: this.$imgs.none1,
				none2: this.$imgs.none2,
				none3: this.$imgs.none3,
				none4: this.$imgs.none4,

				sel1: this.$imgs.sel1,
				sel2: this.$imgs.sel2,
				sel3: this.$imgs.sel3,
				sel4: this.$imgs.sel4,
				
			

				value: 2,
				
				
		
			
		
				

				optionsList: [],

				optionsList1: [],

				optionsList2: [],

				optionsList3: [],


			}
		},
		onShow() {
			this.$nextTick(() => {
				this.touchPageListFn()
				// this.mescroll.resetUpScroll();
			});
		},
		onLoad(options) {

			this.touchPageListFn()

		},
		computed: {

		},
		methods: {
			deleteFn(item) {
				console.log(item)
				uni.showModal({
					title: '提示',
					content: '是否删除该列表',
					success: async (res) => {
						if (res.confirm) {
							const result = await this.$http.post({
								url: this.$api.touchDelete,
								data: {
									ids: [item.id],
								},


							})
							if (result.code == 2000) {

								this.$sun.toast(result.message, 'none')
								this.touchPageListFn()

							} else {

								this.$sun.toast(result.message, 'none')
							}
						} else if (res.cancel) {

						}
					}
				});
			},

			async switch1Change(e, item) {
				console.log(e.detail.value, item)
				// this.$sun.assignObject(this.form, {
				// 	...JSON.parse(decodeURIComponent((options.info)))
				// })
				const result = await this.$http.post({
					url: this.$api.touchAdd,
					data: {
						...item,
						applySort: item.types == 4 ? item.applySort : undefined,
						status: e.detail.value == true ? 1 : 2,
						merchantId: uni.getStorageSync('merchantId'),
					},


				});

				if (result.code == 2000) {
					this.$sun.toast('修改成功', 'none')
					setTimeout(() => {

						this.touchPageListFn()
					}, 1000)


				} else {
					this.$sun.toast(result.msg, 'none')

				}
			},

			changeTabbar(e) {
				console.log(e)
				if (e == 0) {
					this.$sun.navSwitch('/pages/index/index')
			
				} else if (e == 1) {
			
					this.$sun.navTo('/pagesA/creatCenter/TouchIt/index')
				} else if (e == 2) {
					this.$sun.navTo('/pagesA/creatCenter/TouchIt/touchConfiguration')
				} else {
					this.$sun.navTo('/pagesA/creatCenter/TouchIt/CopywritingList')
				}
			},


			async touchPageListFn() {
				const result = await this.$http.post({
					url: this.$api.touchPageList,
					data: {
						merchantId: uni.getStorageSync('merchantId')
					}
				});
				if (result.code == 2000) {
					console.log(result.data.filteredList);

					this.optionsList = result.data.filteredList
					this.optionsList1 = result.data.filteredList2
					this.optionsList2 = result.data.filteredList3
					this.optionsList3 = result.data.filteredList4



				} else {
					uni.showToast({
						title: result.msg,
						duration: 2000,
						success: (res) => {

						}
					});
				}
			},
			addFn() {
				uni.navigateTo({

					url: '/pagesA/creatCenter/TouchIt/touchConfigurationModifyOne'
				})
			},
			modifyFn(item, index, type, typeIndex) {

				console.log(item)
				// this.$sun.assignObject(form, {
				// 	...item
				// })
				console.log(index, type)
				//             if(index==4&&type==1){
				// 	uni.navigateTo({

				// 		url: '/pagesB/touchConfiguration/touchConfigurationXhs?type=6'
				// 	})
				// }else{
				// 	if (type == 4) {
				// 		uni.navigateTo({

				// 			url: '/pagesB/touchConfiguration/touchConfigurationModifyOne?isDy=' + index + '&info=' +
				// 				encodeURIComponent(JSON
				// 					.stringify(item)) + '&type=' + type+'&typeIndex=' + typeIndex
				// 		})
				// 	} else {
				// 		uni.navigateTo({

				// 			url: '/pagesB/touchConfiguration/touchConfigurationModify?isDy=' + index + '&info=' +
				// 				encodeURIComponent(JSON
				// 					.stringify(item)) + '&type=' + type+'&typeIndex=' + typeIndex
				// 		})
				// 	}
				// }
				if (type == 4) {
					uni.navigateTo({

						url: '/pagesB/touchConfiguration/touchConfigurationModifyOne?isDy=' + index + '&info=' +
							encodeURIComponent(JSON
								.stringify(item)) + '&type=' + type + '&typeIndex=' + typeIndex
					})
				} else {
					uni.navigateTo({

						url: '/pagesB/touchConfiguration/touchConfigurationModify?isDy=' + index + '&info=' +
							encodeURIComponent(JSON
								.stringify(item)) + '&type=' + type + '&typeIndex=' + typeIndex
					})
				}


			},
			async upCallback(scroll) {



				const result = await this.$http.post({
					url: this.$api.seoList,
					data: {
						page: scroll.num,

						limit: 10,
						platform: this.type,
						username: uni.getStorageSync('staffCode')


					}
				});
				if (result.code == 2000) {
					// region区域   head词头 body主词 suffix尾词 hashtag话题 
					console.log('result.data', result.data);

					if (this.type == 1) {
						for (let i = 0; i < result.data.list.length; i++) {
							const item = result.data.list[i];
							try {
								if (item.hashtag) {
									console.log(item.hashtag)
									const hashtag = JSON.parse(item.hashtag)
									console.log(hashtag)
									console.log(typeof hashtag)
									if (Array.isArray(hashtag)) {
										let jsPs = JSON.parse(item.hashtag);
										console.log(jsPs)

										// console.log(item.hashtag);
										item.showHashtag = (jsPs.length === 1) ? jsPs[0].toString() : jsPs.join(',');

									}
								}

								// console.log(s);
							} catch (err) {
								console.error(err);
							}
						}
					}

					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					// this.mescroll.endByPage(result.data.list.length, 12);
					if (scroll.num == 1) this.seoList = [];
					this.seoList = this.seoList.concat(result.data.list);

				}
			},

		}
	}
</script>

<style lang="less" scoped>
	.icon {
		width: 50rpx;
		height: 50rpx;
	}

	.pagePadding {
		padding: 20rpx;

		.v-title {
			padding: 30rpx 22rpx 34rpx;

			text {
				width: 10rpx;
				height: 24rpx;
				background: rgb(75, 135, 254);
			}

			view {
				margin-left: 10rpx;
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.configurationList {
			.container {
				width: 346rpx;
				// height: 140rpx;
				border-radius: 20rpx;

				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
				background: rgb(255, 255, 255);
				margin-bottom: 36rpx;

				.icon {
					width: 72rpx;
					height: 72rpx;
					border-radius: 72rpx;
				}

				padding: 0 15rpx 0 15rpx;
			}
		}

		.label {
			background-color: #ECECEC;
			color: #A1A1A1;
			border-radius: 10rpx;
			padding: 8rpx 16rpx;
			display: inline-block;
			margin-left: 20rpx;
		}
	}
</style>